import React, { Component } from 'react';
import {BorderBox12} from '@jiaminghi/data-view-react';
import './index.css';
import echartsStyle from 'echarts/lib/echarts';
import * as echarts from 'echarts';

class TrafficSituation extends Component {

     state = {
        options :{
            tooltip: {
                trigger: 'axis',
                backgroundColor:'rgba(50,50,50,0.7)',
                textStyle:{
                    color:'#fff'
                }
            },
            legend: {
                data: ['出口流量', '入口流量']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '出口流量',
                    type: 'line',
                    smooth: true,
                    symbol:'none',
                    stack: '总量',
                    areaStyle: {
                        normal:{
                           //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                            color: new echartsStyle.graphic.LinearGradient(0, 0, 0, 1, [{ 
        
                                offset: 0,
                                color: 'rgba(80,141,255,0.7)'
                            }, {
                                offset: .34,
                                color: 'rgba(56,155,255,0.8)'
                            },{
                                offset: 1,
                                color: 'rgba(38,197,254,0.4)'
                            }])
                            
                        }
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '入口流量',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    symbol:'none',
                    areaStyle: {
                         normal:{
                           //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                            color: new echartsStyle.graphic.LinearGradient(0, 0, 0, 1, [{ 
        
                                offset: 0,
                                color: 'rgba(120,151,12,0.6)'
                            }, {
                                offset: .34,
                                color: 'rgba(120,151,12,0.8)'
                            },{
                                offset: 1,
                                color: 'rgba(120,151,12,0.4)'
                            }])
                            
                        }
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                }
            ]
        }
     }

    componentDidMount(){
        this.chart = echarts.init(this.el);
        this.chart.setOption(this.state.options);
    }
    render() {
        return (
            <div className="trafficSituation">
                <BorderBox12 className="borderBox12">
                    <div className="title">
                        <span className="iconfont icon-supervise blue"></span>
                        <span className="blue">今日流量态势</span>
                    </div>
                    <div className="sub-title">
                        <span className="gray">平均接纳次数(小时):<i className="blue">1500</i>次</span>
                        <span className="gray">流量峰值:<i className="blue">i300</i>M</span>
                    </div>
                    <div ref={el => (this.el = el)} className="show"> </div>
                </BorderBox12>
            </div>
        );
    }
}

export default TrafficSituation;